<template>
  <hr>
  <h3 v-if="loading">正在加载中</h3>
  <h3 v-else-if="errorMsg">错误信息:{{errorMsg}}</h3>
<!--  <h2>这里展示一个热门的类型</h2>-->
  <h2 v-if="tagData">{{tagData.tag_name}}</h2>
  <div class="row">
    <div class="col-md-9">
      <div class="album py-5 bg-light">
        <div class="container">
          <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
            <div v-for="(item,index) in data" v-bind:key="item.videoid" @click="playVideo(item.videoid,true)">
              <div v-if="index < 6">
                <div class="col">
                  <div class="card shadow-sm">
                    <a href="javascript:">
                      <video width="225" height="225" id="video1" controls>
                        <source v-bind:src="request.video(item.cover_pic)">
                      </video>
                    </a>

                    <div class="card-body">
                      <p class="card-text,line-limit-length"  >{{ item.title}}</p>
                      <p class="card-text">{{ item.info}}</p>
                      <small class="text-muted">已播放{{item.play_num}}次</small>
<!--                      <small class="text-muted"> xxx 人</small>-->
                      <div class="d-flex justify-content-between align-items-center">
                        <div class="btn-group">
<!--                          <button type="button" class="btn btn-sm btn-outline-secondary" v-on:click="playPause('video1')">直接播放</button>-->
<!--                          <button type="button" class="btn btn-sm btn-outline-secondary">进播放页</button>-->
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-3">
      <h1 v-if="tagData">{{tagData.tag_name}}分区排行榜</h1>
      <div v-for="(item,index) in data" v-bind:key="item.videoid">
        <p  class="line-limit-length" @click="playVideo(item.videoid,true)">{{index+1}}: {{item.title}}</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {inject, onBeforeMount, Ref, ref, UnwrapRef} from "vue";
import useGetRequest from "@/hooks/useGetRequest";
import {TagData, VideoData} from "@/types/AllData";
import request from "@/hooks/request";

// 主页中的播放列表,展示热门类型
// 目前就展示一个学习类型,学习的tag
const prefix:string|undefined = inject('prefix')
const prefix2:string|undefined = inject('prefix2')
const playVideo=inject('playVideo')

// 获取热门类型的名字,这里先写学习类型的
// const {loading,data,errorMsg} = useGetRequest<TagData>(prefix+"tag/getTagById/1")
// onBeforeMount(()=>{
// })
const tag = useGetRequest<TagData>(prefix+"tag/getTagById/1")
const tagData = tag.data
// const tagData:TagData | null = tag.data

console.log(tagData)

// 获取10个学习类型的数据,保存在data中
const {loading,data,errorMsg} = useGetRequest<VideoData[]>(prefix+"video/search?ordered=1&pageCapacity=10&pageIndex=1&tagID=1")

// 默认没有播放
const playPause = (videoId: string)=>{
  let pause = ref(true)
  console.log(pause)
  let MyVideo:any = document.getElementById(videoId)
  console.log(MyVideo)
  if (MyVideo as HTMLElement){
    if (MyVideo.paused){
      MyVideo.play()
      pause.value = false
    }else {
      MyVideo.pause()
      pause.value = true
    }
  }else{
    console.log("无法播放")
  }
}
</script>

<style scoped>
  .line-limit-length{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
</style>